import React, {useRef, useState} from 'react';
import ProForm, {
  ModalForm, ProFormTreeSelect, ProFormRadio, ProFormInstance, ProFormText, ProFormDigit, ProFormSelect,
} from '@ant-design/pro-form';
import {TableListItem} from "@/pages/AuthConfig/data";


interface AuthConfigFormProps {
  modalVisible: boolean;
  onCancel: () => void;
  onSubmit: (value: any) => Promise<void>;
  title?: string;
  treeData?: TableListItem[];
  initValue: TableListItem;
}

const AuthConfigForm: React.FC<AuthConfigFormProps> = (props) => {

  const {modalVisible, onCancel, title, treeData, initValue,onSubmit} = props;

  const [authType, setAuthType] = useState<string>(initValue.authType || 'contents');

  const formRef = useRef<ProFormInstance>();

  console.log(authType)

  return (
    <ModalForm
      title={title}
      formRef={formRef}
      visible={modalVisible}
      initialValues={initValue}
      modalProps={{
        onCancel: () => onCancel(),
      }}
      onFinish={onSubmit}
      onValuesChange={(changeValues) => {

        if (changeValues.authType) {
          setAuthType(changeValues.authType);
          formRef.current?.resetFields(['routePath','componentName'])
        }

      }}
    >
      <ProFormRadio.Group
        initialValue="contents"
        width="xl"
        name="authType"
        radioType="button"
        label="权限类型"
        rules={[{required: true, message: '请选择权限类型'}]}
        options={[
          {
            label: '目录',
            value: 'contents',
          },
          {
            label: '菜单',
            value: 'menu',
          },
          {
            label: '权限',
            value: 'auth',
          },
        ]}
      />
      <ProForm.Group>
        <ProFormTreeSelect
          label="上级菜单"
          name="pid"
          request={async () => {
            return treeData || [];
          }}
          placeholder="请选择上级"
          fieldProps={{
            fieldNames: {label: 'name', value: 'id', children: 'children'}
          }}
          width="md"
        />
        <ProFormText
          width="md"
          name="guid"
          label="唯一标示"
          tooltip="用于控制路由与请求"
          placeholder="请输入唯一标示"
          rules={[{required: true, message: '请输入唯一标示'}]}
        />
      </ProForm.Group>
      {authType == 'contents' &&
      <>
        <ProForm.Group>
          <ProFormText
            width="md"
            name="name"
            label="目录名称"
            tooltip="目录显示名称"
            placeholder="请输入目录名称"
            rules={[{required: true, message: '请输入目录名称'}]}
          />
          <ProFormText
            width="md"
            name="icon"
            label="目录图标"
            tooltip="ant design 内置图标名称"
            placeholder="请输入目录图标"
            rules={[{required: true, message: '请输入目录图标'}]}
          />
        </ProForm.Group>
        <ProForm.Group>
          <ProFormText
            width="md"
            name="routePath"
            label="路由地址"
            tooltip="web 路由地址"
            placeholder="请输入路由地址"
            rules={[{required: true, message: '请输入路由地址'}]}
          />
          <ProFormDigit
            width="md"
            name="sort"
            label="目录排序"
            min={0}
            tooltip="目录排序"
            placeholder="请选择目录排序"
            rules={[{required: true, message: '请选择目录排序'}]}
          />
        </ProForm.Group>
        <ProForm.Group>
          <ProFormSelect
            width="md"
            name="type"
            label="权限所属"
            valueEnum={{
              Backend: {text: 'Backend - 后台系统'},
              SysAdmin: {text: 'SysAdmin - 配置系统'},
              Customer: {text: 'Customer - 会员后台'},
              Api: {text: 'Api - API'},
              App: {text: 'App - APP'}
            }}
            placeholder="请选择权限所属"
            rules={[{ required: true, message: '请选择权限所属' }]}
          />
          <ProFormSelect
            width="md"
            name="auth"
            label="是否权限"
            valueEnum={{
              yes: {text: '是'},
              no: {text: '否'},
            }}
            placeholder="请选择是否权限"
            rules={[{ required: true, message: '请选择是否权限' }]}
          />
        </ProForm.Group>
        <ProForm.Group>
          <ProFormSelect
            width="md"
            name="display"
            label="是否显示"
            valueEnum={{
              yes: {text: '是'},
              no: {text: '否'}
            }}
            tooltip="用于控制菜单是否显示"
            initialValue='yes'
            placeholder="请选择是否显示"
            rules={[{ required: true, message: '请选择是否显示' }]}
          />
        </ProForm.Group>
      </>
      }
      {authType == 'menu' &&
      <>
        <ProForm.Group>
          <ProFormText
            width="md"
            name="name"
            label="菜单名称"
            tooltip="菜单显示名称"
            placeholder="请输入菜单名称"
            rules={[{required: true, message: '请输入菜单名称'}]}
          />
          <ProFormText
            width="md"
            name="icon"
            label="菜单图标"
            tooltip="ant design 内置图标名称"
            placeholder="请输入菜单图标"
            rules={[{required: true, message: '请输入菜单图标'}]}
          />
        </ProForm.Group>
        <ProForm.Group>
          <ProFormText
            width="md"
            name="routePath"
            label="路由地址"
            tooltip="web 路由地址"
            placeholder="请输入路由地址"
            rules={[{required: true, message: '请输入路由地址'}]}
          />
          <ProFormDigit
            width="md"
            name="sort"
            label="菜单排序"
            min={0}
            tooltip="菜单排序"
            placeholder="请选择菜单排序"
            rules={[{required: true, message: '请选择菜单排序'}]}
          />
        </ProForm.Group>
        <ProForm.Group>
          <ProFormSelect
            width="md"
            name="type"
            label="权限所属"
            valueEnum={{
              Backend: {text: 'Backend - 后台系统'},
              SysAdmin: {text: 'SysAdmin - 配置系统'},
              Customer: {text: 'Customer - 会员后台'},
              Api: {text: 'Api - API'},
              App: {text: 'App - APP'}
            }}
            placeholder="请选择权限所属"
            rules={[{ required: true, message: '请选择权限所属' }]}
          />
          <ProFormSelect
            width="md"
            name="auth"
            label="是否权限"
            valueEnum={{
              yes: {text: '是'},
              no: {text: '否'},
            }}
            placeholder="请选择是否权限"
            rules={[{ required: true, message: '请选择是否权限' }]}
          />
        </ProForm.Group>
        <ProForm.Group>
          <ProFormText
            width="md"
            name="componentName"
            label="组件名称"
            tooltip="对应src/pages/下组件名称"
            placeholder="请输入组件名称"
            rules={[{required: true, message: '请输入组件名称'}]}
          />
          <ProFormSelect
            width="md"
            name="display"
            label="是否显示"
            valueEnum={{
              yes: {text: '是'},
              no: {text: '否'}
            }}
            tooltip="用于控制菜单是否显示"
            initialValue='yes'
            placeholder="请选择是否显示"
            rules={[{ required: true, message: '请选择是否显示' }]}
          />
        </ProForm.Group>

      </>
      }
      {authType == 'auth' &&
      <>
        <ProForm.Group>
          <ProFormText
            width="md"
            name="name"
            label="权限名称"
            tooltip="权限名称"
            placeholder="请输入权限名称"
            rules={[{required: true, message: '请输入权限名称'}]}
          />
          <ProFormDigit
            width="md"
            name="sort"
            label="权限排序"
            min={0}
            tooltip="权限排序"
            placeholder="请选择权限排序"
            rules={[{required: true, message: '请选择权限排序'}]}
          />
        </ProForm.Group>
        <ProForm.Group>
          <ProFormSelect
            width="md"
            name="type"
            label="权限所属"
            valueEnum={{
              Backend: {text: 'Backend - 后台系统'},
              SysAdmin: {text: 'SysAdmin - 配置系统'},
              Customer: {text: 'Customer - 会员后台'},
              Api: {text: 'Api - API'},
              App: {text: 'App - APP'}
            }}
            placeholder="请选择权限所属"
            rules={[{ required: true, message: '请选择权限所属' }]}
          />
          <ProFormSelect
            width="md"
            name="auth"
            label="是否权限"
            valueEnum={{
              yes: {text: '是'},
              no: {text: '否'},
            }}
            placeholder="请选择是否权限"
            rules={[{ required: true, message: '请选择是否权限' }]}
          />
        </ProForm.Group>
        <ProForm.Group>
          <ProFormSelect
            width="md"
            name="mode"
            label="请求方式"
            valueEnum={{
              GET: {text: 'GET'},
              POST: {text: 'POST'},
              PUT: {text: 'PUT'},
              DELETE: {text: 'DELETE'}
            }}
            placeholder="请选择请求方式"
          />
        </ProForm.Group>
      </>
      }
    </ModalForm>
  );

}


export default AuthConfigForm;
